<template>
  <div class="hello">
    <nine-ul style="margin-top:5px;">
      <nine-li
        v-for="(item,index) in nineData"
        :key='index'
      >
        <a
          href="#"
          @click="check(index,item.id)"
          :class="{active:item.checs}"
        >
          <img
            :src="item.imgsrc"
            alt=""
            srcset=""
          >
          <span>{{item.text}}</span>
        </a>
      </nine-li>
    </nine-ul>
    <button @click="Allsel('sel')">全选</button>
    <button @click="Allsel('cls')">全清</button>
    <button @click="con('con')">console</button>
  </div>
</template>

<script>
// import { Swipe, SwipeItem } from "mint-ui";
import { mapState } from "vuex";
import nineUl from "../modul/nineUl.vue";
import nineLi from "../modul/nineLi.vue";
export default {
  name: "checked",
  components: {
    // Swipe,
    // SwipeItem,
    // Tabbar,
    // TabItem,
    nineUl,
    nineLi
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      selected: "",
      nineData: [
        {
          path: "/one",
          imgsrc: "../../../static/imgs/banner_1.png",
          text: "vuex",
          checs: false,
          id: "01"
        },
        {
          path: "/aaa",
          imgsrc: "../../../static/imgs/banner_2.png",
          text: "全选全清",
          checs: false,
          id: "02"
        },
        {
          path: "/lifecycle",
          imgsrc: "../../../static/imgs/banner_3.png",
          text: "生命周期",
          checs: false,
          id: "03"
        }
      ]
    };
  },
  methods: {
    check(index, id) {
      this.nineData[index].checs = !this.nineData[index].checs;
      // this.$set(this.nineData[index],checs,true)
    },
    Allsel(val) {
      var leng = this.nineData.length;
      for (let i = 0; i < leng; i++) {
        if (val == "sel") {
          this.nineData[i].checs = true;
        }
        if (val == "cls") {
          this.nineData[i].checs = false;
        }
      }
    },
    con() {
      var leng = this.nineData.length;
      var ids = [];
      for (let i = 0; i < leng; i++) {
        if (this.nineData[i].checs == true) {
          ids.push(this.nineData[i].id);
        }
      }
      console.log(ids);
    }
  },
  mounted() {
    this.$store.state.showTabbar = false;
  },
  computed: {
    ...mapState({
      isShow: "showTabbar"
    })
  },
  destroyed() {
    this.$store.state.showTabbar = true;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
  // font-size: 0;
  width: 100%;
  position: absolute;
  top: 30px;
  overflow-y: scroll;
  background-image: url("../../../static/imgs/bg@2x.png");
  background-size: 100% 100%;
  .swiper {
    width: 100%;
    height: 160px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  #box {
    width: 100%;
    .boxUl {
      width: 100%;
      display: flex !important;
      flex-wrap: wrap; // 换行
      li {
        flex: 1;
        width: 100/3%;
        min-width: 100/3%;
        max-width: 100/3%;
        a {
          display: block;
          width: 100%;
          height: 100%;
          text-align: center;
          font-size: 14px;
          box-sizing: border-box;
          border: 1px solid #ccc; /*no*/
          padding: 30px 20px;

          height: 120px;
          background-color: #fff;
          // &::nth-child(odd) { // 奇数

          // }
          img {
            width: 30px;
            height: 30px;
          }
          span {
            margin-top: 5px;
            display: block;
            color: #000;
            overflow: hidden;
            white-space: nowrap; // 不换行
            text-overflow: ellipsis; // 省略号
          }
        }
      }
    }
  }
  #panel {
    width: 100%;
    height: 100px;
    background-color: #fff;
    display: flex;
    .left {
      flex: 0 0 100px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      flex: 1;
      margin-left: 10px;
      background-color: #ccc;
      padding-left: 15px;
      p {
        height: 33px;
        line-height: 33px;
        &:last-child {
          height: 34px;
          line-height: 34px;
        }
      }
    }
  }
  .active {
    background-color: red !important;
  }
}
</style>
